﻿
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=yes" />
    <meta name="format-detection" content="email=no" />
    <title>勘查信息手机版</title>
    <link rel="stylesheet" type="text/css" href="css/css.css" />
    <meta content="勘查信息手机版" name="keywords" />
    <!-- 权限设置 -->
    <script type="text/javascript" src="writeJS/WebApi.js"></script>
</head>
<body>
    <div class="tzrl_box">
        <div class="mq_top">
            <div class="btn_back_l">
                <a class="btn_back" onclick="history.go(-1)">
                    <span></span>
                    <nav>返回</nav>
                </a>
            </div>
            <div class="mq_title">
                现场照片要求
            </div>
            <div class="btn_ch_r">
            </div>
        </div>
        <div class="job_content">
            <div class="d_description">
                <h3 class="d_title">
                    基本信息
                </h3>
                <div class="d_pos_box">
                    <dl>
                        <dt><span id="spreviewImages1">小区外部环境</span><span style="color:red"> *</span></dt>
                        <dd>
                            <input type="file" name="Images" id="1" onchange="add(this,1)" style="display:none" />
                            <div id="previewImages1" onclick="document.getElementById(1).click();">
                                <img src="images/1.jpg" class="preview" />
                            </div>
                            <div id="result"></div>
                        </dd>
                    </dl>
                    <dl>
                        <dt><span id="spreviewImages2">小区门前道路</span></dt>
                        <dd>
                            <input type="file" name="Images" id="2" onchange="add(this,2)" style="display: none" />
                            <div id="previewImages2" onclick="document.getElementById(2).click();"><img src="images/1.jpg" class="preview" /></div>
                        </dd>
                    </dl>
                    <dl>
                        <dt><span id="spreviewImages3">小区入口</span><span style="color:red"> *</span></dt>
                        <dd>
                            <input type="file" name="Images" id="3" onchange="add(this,3)" style="display: none" />
                            <div id="previewImages3" onclick="document.getElementById(3).click();"><img src="images/1.jpg" class="preview" /></div>
                        </dd>
                    </dl>
                    <dl>
                        <dt><span id="spreviewImages4">小区绿化</span></dt>
                        <dd>
                            <input type="file" name="Images" id="4" onchange="add(this,4)" style="display: none" />
                            <div id="previewImages4" onclick="document.getElementById(4).click();"><img src="images/1.jpg" class="preview" /></div>
                        </dd>
                    </dl>
                    <dl>
                        <dt><span id="spreviewImages5">小区内部环境</span><span style="color:red"> *</span></dt>
                        <dd>
                            <input type="file" name="Images" id="5" onchange="add(this,5)" style="display: none" />
                            <div id="previewImages5" onclick="document.getElementById(5).click();"><img src="images/1.jpg" class="preview" /></div>
                        </dd>
                    </dl>
                    <dl>
                        <dt><span id="spreviewImages6">物业地址（建筑楼牌）</span><span style="color:red"> *</span></dt>
                        <dd>
                            <input type="file" name="Images" id="6" onchange="add(this,6)" style="display: none" />
                            <div id="previewImages6" onclick="document.getElementById(6).click();"><img src="images/1.jpg" class="preview" /></div>
                        </dd>
                    </dl>
                    <dl>
                        <dt><span id="spreviewImages7">建筑外观</span></dt>
                        <dd>
                            <input type="file" name="Images" id="7" onchange="add(this,7)" style="display: none" />
                            <div id="previewImages7" onclick="document.getElementById(7).click();"><img src="images/1.jpg" class="preview" /></div>
                        </dd>
                    </dl>
                    <dl>
                        <dt><span id="spreviewImages8">单元门</span><span style="color:red"> *</span></dt>
                        <dd>
                            <input type="file" name="Images" id="8" onchange="add(this,8)" style="display: none" />
                            <div id="previewImages8" onclick="document.getElementById(8).click();"><img src="images/1.jpg" class="preview" /></div>
                        </dd>
                    </dl>
                    <dl>
                        <dt><span id="spreviewImages9">楼梯间</span></dt>
                        <dd>
                            <input type="file" name="Images" id="9" onchange="add(this,9)" style="display: none" />
                            <div id="previewImages9" onclick="document.getElementById(9).click();"><img src="images/1.jpg" class="preview" /></div>
                        </dd>
                    </dl>
                    <dl>
                        <dt><span id="spreviewImages10">入户门</span><span style="color:red"> *</span></dt>
                        <dd>
                            <input type="file" name="Images" id="10" onchange="add(this,10)" style="display: none" />
                            <div id="previewImages10" onclick="document.getElementById(10).click();"><img src="images/1.jpg" class="preview" /></div>
                        </dd>
                    </dl>
                   
                    <dl>
                        <dt><span id="spreviewImages11">居室(1)</span><span style="color:red"> *</span></dt>
                        <dd>
                            <input type="file" name="Images" id="11" onchange="add(this,11)" style="display: none" />
                            <div id="previewImages11" onclick="document.getElementById(11).click();"><img src="images/1.jpg" class="preview" /></div>
                        </dd>
                    </dl>
                    <dl>
                        <dt><span id="spreviewImages20">居室(2)</span><span style="color:red"> *</span></dt>
                        <dd>
                            <input type="file" name="Images" id="20" onchange="add(this,20)" style="display: none" />
                            <div id="previewImages20" onclick="document.getElementById(20).click();"><img src="images/1.jpg" class="preview" /></div>
                        </dd>
                    </dl>
                    <dl>
                        <dt><span id="spreviewImages21">居室(3)</span><span style="color:red"> *</span></dt>
                        <dd>
                            <input type="file" name="Images" id="21" onchange="add(this,21)" style="display: none" />
                            <div id="previewImages21" onclick="document.getElementById(21).click();"><img src="images/1.jpg" class="preview" /></div>
                        </dd>
                    </dl>
                    <dl>
                        <dt><span id="spreviewImages12">卧室</span></dt>
                        <dd>
                            <input type="file" name="Images" id="12" onchange="add(this,12)" style="display: none" />
                            <div id="previewImages12" onclick="document.getElementById(12).click();"><img src="images/1.jpg" class="preview" /></div>
                        </dd>
                    </dl>
                    <dl>
                        <dt><span id="spreviewImages13">客厅</span></dt>
                        <dd>
                            <input type="file" name="Images" id="13" onchange="add(this,13)" style="display: none" />
                            <div id="previewImages13" onclick="document.getElementById(13).click();"><img src="images/1.jpg" class="preview" /></div>
                        </dd>
                    </dl>
                    <dl>
                        <dt><span id="spreviewImages14">厨房</span></dt>
                        <dd>
                            <input type="file" name="Images" id="14" onchange="add(this,14)" style="display: none" />
                            <div id="previewImages14" onclick="document.getElementById(14).click();"><img src="images/1.jpg" class="preview" /></div>
                        </dd>
                    </dl>
                    <dl>
                        <dt><span id="spreviewImages15">卫生间</span></dt>
                        <dd>
                            <input type="file" name="Images" id="15" onchange="add(this,15)" style="display: none" />
                            <div id="previewImagesImages15" onclick="document.getElementById(15).click();"><img src="images/1.jpg" class="preview" /></div>
                        </dd>
                    </dl>
                    <dl>
                        <dt><span id="spreviewImages16">阳台</span></dt>
                        <dd>
                            <input type="file" name="Images" id="16" onchange="add(this,16)" style="display: none" />
                            <div id="previewImages16" onclick="document.getElementById(16).click();"><img src="images/1.jpg" class="preview" /></div>
                        </dd>
                    </dl>
                    <dl>
                        <dt><span id="spreviewImages17">窗外景观</span></dt>
                        <dd>
                            <input type="file" name="Images" id="17" onchange="add(this,17)" style="display: none" />
                            <div id="previewImages17" onclick="document.getElementById(17).click();"><img src="images/1.jpg" class="preview" /></div>
                        </dd>
                    </dl>
                    <dl>
                        <dl>
                            <dt><span id="spreviewImages19">电梯间</span></dt>
                            <dd>
                                <input type="file" name="Images" id="19" onchange="add(this,19)" style="display: none" />
                                <div id="previewImages19" onclick="document.getElementById(19).click();"><img src="images/1.jpg" class="preview" /></div>
                            </dd>
                        </dl>
                        <dt><span id="spreviewImages18">估价人员在现场(1)</span><span style="color:red"> *</span></dt>
                        <dd>
                            <input type="file" name="Images" id="18" onchange="add(this,18)" style="display: none" />
                            <div id="previewImages18" onclick="document.getElementById(18).click();"><img src="images/1.jpg" class="preview" /></div>
                        </dd>
                    </dl>
                    <dl>
                        <dt> <span id="spreviewImages22">估价人员在现场(2)</span><span style="color:red"> *</span></dt>
                        <dd>
                            <input type="file" name="Images" id="22" onchange="add(this,22)" style="display: none" />
                            <div id="previewImages22" onclick="document.getElementById(22).click();"><img src="images/1.jpg" class="preview" /></div>
                        </dd>
                    </dl>
                    
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footer_top">
                <ul class="user_info">
                    <a href="Index.html">主页</a>
                </ul>
                <ul class="back_top">
                    <a href="javascript:scroll(0,0)">TOP</a>
                </ul>
            </div>
            <ul class="copyright">
                <li>
                    <a href="javascript:;">电脑版</a><span>|</span><a href="javascript:;">普通版</a><span>|</span><a href="javascript:;">用户反馈</a><span>|</span><a href="javascript:;">联系我们</a>
                </li>
                <li>&copy;Copyright 北京中资房产 by 房产估价系统1.0 </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/layer/layer.js"></script>
    <script type="text/javascript" src="writeJS/Common.js"></script>
    <script type="text/javascript">
        var uri = document.location.search;//接收页面传值
        var i = uri.lastIndexOf("?") + 1;//获取问号前面的值
        var P_ReportNumber = uri.substr(i);//截取问号前面的值
        window.onload = function () {
            var result = document.getElementById("result");
        }
        //上传控件的触发方法
        function add(file, a) {
            var prevDiv = document.getElementById('previewImages' + a);//显示图片区域
            if (file.files && file.files[0]) {
                var filetype = file.files[0];
                if (!/image\/\w+/.test(filetype.type)) {
                    layer.msg('请选择图片进行上传!', { icon: 0, time: 1000 })
                    return false;
                }
                else {
                    var reader = new FileReader();
                    reader.onload = function () {
                        //prevDiv.innerHTML = '<img name="image"  src="' + this.result + '" class="preview" />';
                        //result.value = this.result;//把文件的结果值
                        //var ns = document.getElementById('preview' + a).nextElementSibling.innerHTML;   //获得s的下一个兄弟节点
                        var szy = document.createElement("img");
                        szy.src = this.result;
                        szy.className = "preview";
                        var quality = 50;
                        szy.src = jiccompress(szy, quality).src;
                        var ns = $("#spreviewImages" + a).html()  //获得s的下一个兄弟节点
                        prevDiv.innerHTML = '<img name="image"  src="' + szy.src + '" class="preview" />';


                        //alert();
                        $.ajax({
                            type: "POST",
                            url: ApiUrl + "api/SitePicture/AddSitePicture",
                            data: {
                                T_Pictureurl: szy.src,
                                T_ptype: ".jpg",
                                T_ReportNumber: P_ReportNumber,
                                T_Addr: 'previewImages' + a,
                                T_SpName: ns
                            },//所有上传文件统一为此对象。result.value 不再截取。type 为文件类型，带.
                            success: function (data) {
                                switch (data) {
                                    case -2: layer.msg('修改失败!', { icon: 2, time: 2000 }); break;
                                    case -1: layer.msg('上传图片失败!', { icon: 2, time: 2000 }); break;
                                    case 0: layer.msg('服务器连接失败!', { icon: 2, time: 2000 }); break;
                                    case 1: layer.msg('上传成功!', { icon: 1, time: 2000 }); break;
                                    case 2: layer.msg('修改成功!', { icon: 1, time: 2000 }); break;
                                    case 3: layer.msg('该状态不允许操作!', { icon: 1, time: 2000 }); break;
                                }

                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                layer.msg('服务器连接失败!', { icon: 2, time: 2000 });
                            }
                        });

                    }
                    reader.readAsDataURL(file.files[0]);
                }

            }
            else {
                prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
            }
        }
        //控制上传图片的宽高
        function jiccompress(source_img_obj, quality) {

            var mime_type = "image/jpeg";
            var cvs = document.createElement('canvas');
            var maxWidth = 500;
            var maxHeight = 500;
            var w = 0;
            var h = 0;

            if (maxWidth / maxHeight <= source_img_obj.naturalWidth / source_img_obj.naturalHeight) //原图片宽高比例 大于 图片框宽高比例
            {
                w = maxWidth;   //以框的宽度为标准
                h = maxWidth * (source_img_obj.naturalHeight / source_img_obj.naturalWidth);
            }
            else {   //原图片宽高比例 小于 图片框宽高比例
                w = maxHeight * (source_img_obj.naturalWidth / source_img_obj.naturalHeight);
                h = maxHeight;   //以框的高度为标准
            }

            cvs.width = w;
            cvs.height = h;
            source_img_obj.width = w;
            source_img_obj.height = h;
            var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0, w, h);
            var newImageData = cvs.toDataURL(mime_type, quality / 100);
            var result_image_obj = new Image();
            result_image_obj.src = newImageData;
            return result_image_obj;
        };

        $(function () {
            //图片的回传显示
            $.ajax({
                type: "get",
                url: ApiUrl + "api/SitePicture/Picture",
                async: false,
                data: {
                    T_ReportNumber: P_ReportNumber
                },
                success: function (data, status) {
                    $(data).each(function (i, item) {
                        $("#" + item.T_Addr + "").empty();
                        $("#" + item.T_Addr + "").html('<img id="image"  src="' + ApiUrl + item.T_Pictureurl + '" class="preview"/>');
                        //   document.getElementById(item.SP_Addr).innerHTML = '<img id="image"  src="' + item.SP_Picturename + '" />';
                    })
                },
                error: function (e) {
                    layer.msg('服务器链接超时!', { icon: 2, time: 2000 });
                },
                complete: function () {

                }
            })
            ///判断状态去取消按钮
            $.ajax({
                type: "get",
                url: ApiUrl + "api/Personal/selectbyP_ReportNumberss",
                data: {
                    P_ReportNumber: P_ReportNumber
                },
                //async: false,
                //contentType: 'application/json',
                success: function (data, status) {
                    if (status == "success") {
                        if (data != null) {
                            if (data.T_State != 1) {
                                //  $(":file").removeAttr("onchange");
                                $("div").removeAttr("onclick");
                            }
                        }
                    }
                },
                error: function (e) {
                    layer.msg('服务器链接超时!', { icon: 2, time: 2000 });
                },
                complete: function () {

                }
            })
        });
    </script>
    <style type="text/css">
        .preview {
            width: 100%;
            height: 100%;
        }
    </style>
</body>
</html>
